<template>
	<view class="pages-work-order-detail">

		<view id="body" class="body">

			<scroll-view @scroll="onScroll" :scroll-top="scrollTop" scroll-y :scroll-into-view="currentAnchor"
				class="scroll-warp" scroll-with-animation="true" :style="`height:${scrollViewHeight}rpx`">
				<text id="orderNum" class="orderNum">工单号:{{orderNum}}</text>


				<custom-work-order-detail-card v-if="detailData.evaluate" label="评价"
					:id="anchorConfig.evaluate.anchorId">
					<custom-preview-text-content label="评价时间">
						{{detailData.evaluate.createTime}}
					</custom-preview-text-content>
					<custom-preview-text-content label="评价人">
						{{detailData.evaluate.createUserName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="服务态度">
						<fui-rate activeColor="#E37318" size="48" disabled
							:score="detailData.evaluate.serviceAttitude"></fui-rate>
					</custom-preview-text-content>
					<custom-preview-text-content label="服务质量">
						<fui-rate activeColor="#E37318" size="48" disabled
							:score="detailData.evaluate.serviceQuality"></fui-rate>
					</custom-preview-text-content>
					<custom-preview-text-content label="响应时效">
						<fui-rate activeColor="#E37318" size="48" disabled
							:score="detailData.evaluate.responsePrescription"></fui-rate>

					</custom-preview-text-content>
					<custom-preview-text-content label="意见与建议">
						{{detailData.evaluate.commentSuggestion}}
					</custom-preview-text-content>
					<custom-preview-text-content label="签名">
						<image style="width: 422rpx; height: 236rpx" :src="viewSign(detailData.evaluate.autograph)">
						</image>

					</custom-preview-text-content>
					<custom-preview-text-content label="附件">
					</custom-preview-text-content>
					<custom-file-list :list="detailData.evaluate.enclosure" isDetail></custom-file-list>
				</custom-work-order-detail-card>

				<custom-work-order-detail-card v-if="detailData.makeList" hyy-class="m-b-32" ::key="index"
					v-for="(item,index) in detailData.makeList" :label="`处理信息${index+1} ${item.makeTypeToName }`"
					:id="`makeList${index}`">

					<template #other>
						<template v-if="!(item.processObj.timeOutRemark)">
							<fui-text @click="onTimeout(item.id)"
								v-if="item.processObj  ? (item.processObj.isTimeOut==0) : false " color="#0052d9"
								size="28" text="超时备注">

							</fui-text>
						</template>

					</template>
					<custom-preview-text-content label="处理时间" :isDanger="item.processObj.isTimeOut==0"
						:content="item.operDate">
					</custom-preview-text-content>
					<custom-preview-text-content label="处理人" :content="item.makeUserName">
					</custom-preview-text-content>


					<!-- 完成 已修改-->
					<template v-if="item.makeType==='complete'">
						<!-- 	<custom-preview-text-content label="实际报修地址">
							{{ item.processObj ? item.processObj.actualRepairPlaceToName : '' }}
						</custom-preview-text-content> -->
						<custom-preview-text-content label="实际故障描述">
							{{ item.processObj ? item.processObj.faultRemark : '' }}
						</custom-preview-text-content>
						<custom-preview-text-content label="实际故障分类">
							{{ item.processObj ? item.processObj.faultTypeToName : '' }}
						</custom-preview-text-content>
						<custom-preview-text-content label="解决办法">
							{{ item.processObj ? item.processObj.makeWay : '' }}
						</custom-preview-text-content>
						<custom-preview-text-content label="实际工时">
							{{ item.processObj.realTime ? item.processObj.realTime+'小时' : '' }}
						</custom-preview-text-content>
						<!-- 	<custom-preview-text-content label="资产名称">
							{{ item.processObj ? item.processObj.equipment : '' }}
						</custom-preview-text-content>
						<custom-preview-text-content label="资产位置">
							{{ item.processObj ? item.processObj.equipmentAddress : '' }}
						</custom-preview-text-content> -->
						<custom-preview-text-content label="附件"> </custom-preview-text-content>
						<custom-file-list :list="item.processObj.processEnclosure" isDetail></custom-file-list>
					</template>
					<template v-if="item.makeType==='suspend'">
						<custom-preview-text-content label="暂停原因">
							{{ item.processObj.reason }}
						</custom-preview-text-content>
						<custom-preview-text-content label="说明">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
						<custom-preview-text-content label="附件"> </custom-preview-text-content>
						<custom-file-list :list="item.processObj.enclosure" isDetail></custom-file-list>
					</template>
					<!-- 终止 已修改-->
					<template v-if="item.makeType==='end_termination'">

						<custom-preview-text-content label="终止原因">
							{{ item.processObj.reason }}
						</custom-preview-text-content>
						<custom-preview-text-content label="说明">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
					</template>
					<!-- 转交 已修改 -->
					<template v-if="item.makeType==='forward'">

						<custom-preview-text-content label="转交至">
							{{ item.processObj.sendName }}
						</custom-preview-text-content>
						<custom-preview-text-content label="转交原因">
							{{ item.processObj.reason }}
						</custom-preview-text-content>
						<custom-preview-text-content label="说明">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
					</template>
					<!-- 退回 已修改-->
					<template v-if="item.makeType==='back'">
						<custom-preview-text-content label="退单原因">
							{{ item.processObj.reason }}
						</custom-preview-text-content>
						<custom-preview-text-content label="退单说明">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
					</template>

					<!-- 处理 已修改-->
					<template v-if="item.makeType==='making'">
						<custom-preview-text-content label="处理内容">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
						<custom-preview-text-content label="附件"> </custom-preview-text-content>
						<custom-file-list :list="item.processObj.processEnclosure" isDetail></custom-file-list>
					</template>
					<!-- 工单升级 -->
					<template v-if="item.makeType==='end_upgrade'">
						<custom-preview-text-content label="需求标题">
							{{ item.processObj.title }}
						</custom-preview-text-content>
						<custom-preview-text-content label="需求描述">
							{{ item.processObj.remark }}
						</custom-preview-text-content>
						<custom-preview-text-content label="涉及系统">
							{{ item.processObj.aboutSystemToName }}
						</custom-preview-text-content>
						<custom-preview-text-content label="优先级">
							{{ item.processObj.levelToName }}
						</custom-preview-text-content>
						<custom-preview-text-content label="期望完成日期">
							{{ item.processObj.endTime }}
						</custom-preview-text-content>
						<custom-preview-text-content label="提出日期">
							{{ item.processObj.startTime }}
						</custom-preview-text-content>
						<template v-for="(child,subindex) in item.processObj.proposeList">
							<custom-preview-text-content :label="`提出科室${subindex+1}`">
								{{ child.organizerName }};{{ child.sponsor }};{{ child.phone }}
							</custom-preview-text-content>
						</template>

						<custom-preview-text-content label="附件"> </custom-preview-text-content>
						<custom-file-list :list="item.processObj.enclosure" isDetail></custom-file-list>
					</template>

					<!-- 多人协作 已修改-->
					<template v-if="item.makeType==='assist'">
						<custom-preview-text-content label="协作说明">
							{{ item.processObj.assistRemark }}
						</custom-preview-text-content>
						<custom-preview-text-content label="公共附件"></custom-preview-text-content>
						<custom-file-list :list="item.processObj.assistEnclosure" isDetail></custom-file-list>
						<template v-for="(child,index) in item.processObj.assistList">
							<custom-preview-text-content :label="'协作人'+(index+1)">
								{{ child.sendName }}
							</custom-preview-text-content>
							<custom-preview-text-content label="协作事务">
								{{ child.content }}
							</custom-preview-text-content>
							<custom-preview-text-content label="附件"></custom-preview-text-content>
							<custom-file-list :list="child.assistEnclosure" isDetail></custom-file-list>
						</template>
					</template>
					<custom-preview-text-content label="超时备注" v-if="item.processObj.timeOutRemark">
						{{item.processObj.timeOutRemark}}
					</custom-preview-text-content>
				</custom-work-order-detail-card>
				<custom-work-order-detail-card v-if="detailData.receive" label="接单信息" hyy-class="m-b-32"
					:id="anchorConfig.receive.anchorId">
					<custom-preview-text-content label="接单时间">
						{{detailData.receive.createTime}}
					</custom-preview-text-content>
					<custom-preview-text-content label="接单方式">
						{{detailData.receive.receiveWayName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="接单人">
						{{detailData.receive.makeUserName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="接单小组">
						{{detailData.receive.makeTeamDepart}}
					</custom-preview-text-content>
				</custom-work-order-detail-card>
				<custom-work-order-detail-card hyy-class="m-b-32" v-for=" (item,index) in  detailData.sendList"
					:key="index" :label="`派单信息${index+1}`" :id="`sendList${index}`">
					<custom-preview-text-content label="派单时间">
						{{item.createTime}}

					</custom-preview-text-content>
					<custom-preview-text-content label="派单人">
						{{item.createUserName}}

					</custom-preview-text-content>
					<custom-preview-text-content label="指派给">
						{{item.sendDeptName || item.sendTeamName || item.sendUserName }}

					</custom-preview-text-content>
				</custom-work-order-detail-card>
				<custom-work-order-detail-card v-if="detailData.info" label="报修信息" hyy-class="m-b-32"
					:id="anchorConfig.info.anchorId">
					<custom-preview-text-content label="报修时间">
						{{detailData.info.createTime}}
					</custom-preview-text-content>
					<custom-preview-text-content label="报修人">
						{{detailData.info.user}}
					</custom-preview-text-content>
					<custom-preview-text-content label="报修电话">
						{{detailData.info.phone}}
					</custom-preview-text-content>
					<custom-preview-text-content label="报修科室">
						{{detailData.info.deptName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="报修地址">
						{{detailData.info.place}}
					</custom-preview-text-content>
					<custom-preview-text-content label="故障地址">
						{{detailData.info.faultAddress}}
					</custom-preview-text-content>
					<custom-preview-text-content label="报修IP">
						{{detailData.info.ipAddress}}
					</custom-preview-text-content>
					<custom-preview-text-content label="录音">
						<custom-button-voice-play v-if="detailData.info.recording"
							:playValue="detailData.info.recording"></custom-button-voice-play>

					</custom-preview-text-content>
				</custom-work-order-detail-card>
				<custom-work-order-detail-card v-if="detailData.fault" label="故障信息" hyy-class="m-b-32"
					:id="anchorConfig.fault.anchorId">
					<custom-preview-text-content label="建单时间">
						{{ dtf(detailData.fault.createTime,'YYYY-MM-DD  HH:mm:ss')}}
					</custom-preview-text-content>
					<custom-preview-text-content label="建单人">
						{{detailData.fault.createUserName}}
					</custom-preview-text-content>




					<!-- 	<custom-preview-text-content label="预计工时">
						{{detailData.fault.reqTime}}

					</custom-preview-text-content> -->
					<!-- 
					<custom-preview-text-content label="资产名称">
						{{detailData.fault.equipment}}
					</custom-preview-text-content>
					<custom-preview-text-content label="资产位置">
						{{detailData.fault.equipmentAddress}}
					</custom-preview-text-content> -->
					<custom-preview-text-content label="故障描述">
						<rich-text :nodes="detailData.fault.faultRemark"></rich-text>

					</custom-preview-text-content>

					<custom-preview-text-content label="故障分类">
						{{detailData.fault.faultTypeToName}}
					</custom-preview-text-content>

					<custom-preview-text-content label="处理人">
						{{detailData.fault.makeUserName}}
					</custom-preview-text-content>

					<custom-preview-text-content label="工单来源">
						{{detailData.fault.sourceToName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="备注">
						{{ detailData.fault.remarks }}
					</custom-preview-text-content>
					<custom-preview-text-content label="是否为特殊工单">
						{{ detailData.fault.specialOrderToName }}
					</custom-preview-text-content>

					<custom-preview-text-content label="紧急程度">
						{{detailData.fault.degreeToName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="影响范围">
						{{detailData.fault.rangeTypeToName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="响应类型">
						{{detailData.fault.responseTypeToName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="期望完成时间">
						{{detailData.fault.completeTypeToName}}
					</custom-preview-text-content>
					<custom-preview-text-content label="完成时间">
						{{ detailData.fault.completeTime }}
					</custom-preview-text-content>
					<custom-preview-text-content label="附件"></custom-preview-text-content>
					<custom-file-list :list="detailData.fault.enclosure" isDetail></custom-file-list>
				</custom-work-order-detail-card>

			</scroll-view>



			<view class="anchor-menu">
				<fui-icon @click="showPopver= true" name="list" color="#0052D9" size="48"></fui-icon>
			</view>
			<fui-bottom-popup :show="showPopver" @close="showPopver=false">
				<scroll-view scroll-y class="fui-scroll__view">
					<fui-panel :panelData="anchorList" @click="onAnchorList"></fui-panel>
				</scroll-view>
			</fui-bottom-popup>

		</view>
		<fui-row class="footer" id="footer" v-if="buttonHandle &&  buttonHandle.length">

			<fui-col :span="buttonHandle.length === 1 ? 24 :11 " v-for="(item,index) in buttonHandle"
				:offset="index==1 ? 2 : 0">
				<fui-button :background="index==0 ? '#F2F3FF' :'#0052D9' " :color="index===0?'#0052D9':'#fff'"
					@click="onButton(orderInfo,item,true)">
					{{item.label}}
				</fui-button>


			</fui-col>

		</fui-row>
	</view>
	<fui-backtop :scrollTop="scrollTop" bottom="300" name="top" background="#fff" @click="scrollTop = 0"
		color="#333333"></fui-backtop>

</template>

<script>
	import {
		defineComponent
	} from "vue"
	import {
		WorkOrderApi
	} from "../../api/workOrder"
	import utils from '@/components/firstui/fui-utils';
	import _ from 'lodash'
	import {
		dateFormatter,
		getElHeightRpx
	} from "../../utils/util";

	import {
		useSyStemStore
	} from "../../store/modules/system";
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	import {
		SubPages
	} from "../../config/router-config";
	import {
		queryParams

	} from "../../uni_modules/uv-ui-tools/libs/function";
	import {
		useHandleWorkOrder
	} from "../../store/modules/handleWorkOrder";
	import {
		PREVIEW_URL
	} from "../../_env";
	export default defineComponent({

		data() {
			return {

				scrollTop: 0,
				detailData: {},
				orderNum: '',
				showPopver: false,
				// 当前锚点位置
				currentAnchor: '',
				// 锚点数据配置
				anchorConfig: {
					evaluate: {
						anchorId: 'evaluate',
						remark: '评价信息',
						text: '评价信息',
						label: '评价信息',
						title: '评价信息',
						time: '',
						show: false
					},
					receive: {
						anchorId: 'receive',
						remark: '接单信息',
						text: '接单信息',
						label: '接单信息',
						title: '接单信息',
						time: '',
						show: false
					},
					sendList: {
						anchorId: 'sendList',
						remark: '派单信息',
						text: '派单信息',
						label: '派单信息',
						title: '派单信息',
						time: '',
						show: false
					},
					info: {
						anchorId: 'info',
						remark: '报修信息',
						text: '报修信息',
						label: '报修信息',
						title: '报修信息',
						time: '',
						show: false
					},
					fault: {
						anchorId: 'fault',
						remark: '故障信息',
						text: '故障信息',
						label: '故障信息',
						title: '故障信息',
						time: '',
						show: false
					},
					assistList: {
						anchorId: 'assistList',
						remark: '协作信息(子工单)',
						text: '协作信息(子工单)',
						label: '协作信息(子工单)',
						title: '协作信息(子工单)',
						time: '',
						show: false
					},
					assistMain: {
						anchorId: 'assisMain',
						remark: '协作信息(主工单)',
						text: '协作信息(主工单)',
						label: '协作信息(主工单)',
						title: '协作信息(主工单)',
						time: '',
						show: false
					},
					makeList: {
						anchorId: 'makeList',
						remark: '处理记录',
						text: '处理记录',
						label: '处理记录',
						title: '处理记录',
						time: '',
						show: false
					},
				},
				scrollViewHeight: 0,
				where: ''
			}
		},
		created(options) {
			console.log('-created--', );
		},
		mounted() {
			console.log('-mounted-');
		},
		onReady() {
			console.log('--onReady--');
		},
		async onLoad(options) {
			console.log('-onLoad--', options);
			this.orderNum = options.orderNum
			this.where = options.where
			await this.initData(this.orderNum)
			this.$nextTick(() => {
				this.initStyle()
			})
		},
		computed: {
			...mapState(useSyStemStore, ['viewHeight']),

			...mapGetters(useHandleWorkOrder, ['orderSearchButton', 'myOrderButton']),
			...mapState(useHandleWorkOrder, ['whereModule']),

			orderInfo() {
				const {
					fault,
					info
				} = this.detailData
				return {
					currState: fault?.currState || null,
					makeUser: fault?.makeUser || null,
					deptId: info?.deptId || null,
					orderNum: info?.orderNum || null
				}
			},

			// 处理按钮操作控制
			buttonHandle() {
				const m = this.where || this.whereModule
				if (m === 'myOrder') {
					const b = this.myOrderButton[this.orderInfo.currState]
					return b
				} else {
					const v = this.orderSearchButton[this.orderInfo.currState]
					if (v?.length) {
						const b = v.filter(item => {
							const w = item[m]
							if ((w && w.dept && w.dept == this.orderInfo.deptId) || (w && w.createUser && w
									.createUser == this.orderInfo.createUser)) {
								return item
							}
						})
						return b
					}
					return []

				}

			},

			anchorList() {

				const names = {
					makeList: '处理信息',
					sendList: '派单信息'
				}
				for (let i in this.detailData) {
					if (this.detailData[i] instanceof Array) {
						this.detailData[i].forEach((element, index) => {
							console.log(element.operDate, 'element.operDate');
							this.anchorConfig[`${i}${index}`] = {
								anchorId: `${i}${index}`,
								remark: '处理记录',
								text: `${names[i]}${index+1}`,
								label: `${names[i]}${index+1}`,
								title: `${names[i]}${index+1}`,
								// time: dayjs(element.operDate).format('YYYY-MM-DD HH:MM:ss'),
								time: element.operDate,
								show: true
							}
						});
					} else {
						this.anchorConfig[i].show = !_.isEmpty(this.detailData[i])
						if (this.anchorConfig[i].show) {

							// this.anchorConfig[i].time = dayjs(this.detailData[i].createTime).format('YYYY-MM-DD HH:MM:ss')
							// this.anchorConfig[i].time = utils.dateFormatter(this.detailData[i].createTime,
							// 	'y-m-d h:i:s', 4)
						}
					}
				}
				const resultArray = _.values(_.pickBy(this.anchorConfig, {
					show: true
				}));
				return {
					list: resultArray
				}
			}
		},
		methods: {

			...mapActions(useHandleWorkOrder, ['onButton']),
			dtf: dateFormatter,
			onTimeout(id) {
				const params = {
					id
				}
				uni.navigateTo({
					url: `${SubPages.TIMEOUT_REMARK.router}${queryParams(params)}`
				})
			},

			onScroll(e) {
				console.log('23detail');
				this.scrollTop = e.detail.scrollTop
			},
			async initData(orderNum) {
				const res = await WorkOrderApi.getDetail(orderNum)
				this.detailData = res.data
			},
			onAnchorList(e) {
				console.log(e);
				this.currentAnchor = e.anchorId
				this.showPopver = false

			},
			initStyle() {
				if (this.buttonHandle?.length) {
					const the = this
					getElHeightRpx('#footer', (height) => {
						the.scrollViewHeight = the.viewHeight - height
					})
				} else {
					this.scrollViewHeight = this.viewHeight
				}
			},
			// 签名图片
			viewSign(url) {
				return `${PREVIEW_URL}${url}`

			}

		},
	})
</script>

<style lang="scss">
	.orderNum {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6);
		padding: 16rpx 0;
		display: block;
	}

	.fui-scroll__view {
		height: 600rpx;
	}

	.pages {
		&-work {
			&-order {
				&-detail {
					background: #f0f2f5;
					box-sizing: border-box;
					height: 100vh;
					width: 100%;
					overflow-y: auto;
					display: flex;
					flex-direction: column;

					.body {
						flex: 1;
						padding: 0 32rpx;
						position: relative;
					}

					.footer {
						background-color: #fff;
						margin-bottom: env(safe-area-inset-bottom);
						padding: 32rpx;
						box-shadow: 0 0 2rpx #e7e7e7;
					}

					.back-top {
						display: flex;
						justify-content: center;
						padding-bottom: 16rpx;
					}
				}
			}
		}
	}

	.anchor {
		&-menu {
			position: fixed;
			right: 32rpx;
			bottom: 192rpx;
			width: 96rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F2F3FF;
			box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0, 0, 0, 0.1),
				0rpx 16rpx 20rpx 2rpx rgba(0, 0, 0, 0.06),
				0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
		}

		&-list {
			&-wrapper {
				width: 360rpx;
				overflow: hidden;
				background: #ffffff;
				box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0, 0, 0, 0.1),
					0rpx 16rpx 20rpx 2rpx rgba(0, 0, 0, 0.06),
					0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}
	}

	.m {
		&-t {
			&-16 {
				margin-top: 16rpx;
			}
		}

		&-b {
			&-32 {
				margin-bottom: 32rpx;
			}
		}
	}
</style>